import React, { useState } from 'react'
import style from './style.module.scss'
import { useRecoilState } from 'recoil'
import { FollowSideBarMock } from './mock'
import AvatarView from '../../AvatarView'
import FollowBnt from '../../Button/FollowBtn'

export default function FollowSideBar() {
    const [followList, setFollowList] = useRecoilState(FollowSideBarMock)

    return (
        <div className={style.container}>
            <span>关注列表</span>
            <div className={style.list}>
                {followList.map((res, index) => {
                    return (
                        <div className={style.user__card} key={index}>
                            <div className={style.card__head}>
                                <AvatarView width={'42px'} height={'42px'} img={res.avatar} />
                                <span>{res.userName}</span>
                            </div>
                            <div className={style.btn}>
                                <FollowBnt width={'42px'} height={'32px'} userId={res.userId} />
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
